<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <div class="message">
      <div><h1>项目名称:{{formEidt.projectName }}  <span> &emsp; </span> 编号：{{formEidt.projectNo}}</h1></div>
      <div>
        <el-form
          :inline="true"
          ref="elForm"
          type="text"
          :model="form"
          size="medium"
          label-width="150px"
          style="margin: 20px 0px 0 10px"
        >
          <el-form-item label="创建人:">
            <!-- <span> {{拿到数据渲染}} </span> -->
            <span>{{ formEidt.createBy }}</span>
          </el-form-item>

          <el-form-item label="创建时间:">
            <span>{{ formEidt.createTime }}</span>
          </el-form-item>
          <el-form-item label="最后修改人:">
            <span>{{ formEidt.updateBy }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ formEidt.updateTime }}</span>
          </el-form-item>

        </el-form>
        
        <div class="remove">
          <el-popover placement="top" width="160" v-model="visible">
           
            
            <el-button style="margin-top: 0px" slot="reference"
            @click="handleDelete"
              >删除</el-button
            >
          </el-popover>
        </div>
      </div>
    </div>
    <el-tab-pane label="基础信息" name="second">
      <dasics></dasics>
    </el-tab-pane>
    <el-tab-pane label="项目建模" name="first">
      <div class="warp">
        <side ref="data"></side>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import Dasics from "../../../components/projectType/index.vue";
import Side from "../../../components/projectType/side/index.vue";

import {
  getContractInfo,
  getFloorlist,
  getFloorLayer,
  listProjectInfo,
  getProjectInfo,
  delBuild,
  delProjectInfo,
  addProjectInfo,
  updateProjectInfo,
} from "@/api/project/ProjectInfo";

export default {
  components: { Side, Dasics },
  data() {
    return {
      louList: [],
      // 表头
      dataColumn: [],
      // 表格内容
      dataList: [],
      LouTable: [],
      queryParams: {
        projectNo: "",
        buildNo: "",
        compomentNo: "",
        compomentType: "",
      },

      visible: false,

      activeName: "first",
      open: true,
      tableData: [],
      deptOptions: undefined,

      elForm: {},
      // 可以绑定请求的数据
      formData: {
        field101: undefined,
        field102: 3,
      },
      formDatas: {
        field101: undefined,
        field102: 3,
      },
      formEidt: [],
      input: "",
      // 菜单写死的数据
      datas: [
        {
          id: 1,
          label: "一级 1",
          children: [
            { id: 2, label: "一级 1" },
            { id: 3, label: "一级 1" },
            { id: 4, label: "一级 1" },
          ],
        },
      ],
      restaurants: [],
      state: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 单选框
      radio1: "1",
      radio2: "1",

      // 按钮切换
      activeName: "second",
      // 弹框
      dialogTableVisible: false,
      dialogFormVisible: false,
      ble: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  // 菜单用到的生命周期
  mounted() {
    this.restaurants = this.loadAll();
  },
  created() {
    // 上面详细信息
    getProjectInfo(this.$route.query.id).then((response) => {
      this.formEidt = response.data;
      console.log("上面详细信息", response.data.projectNo);
      console.log("res", response);
    });
    // 合同信息
    // getContractInfo("6").then((res) => {
    //   console.log("合同信息1111", res);
    // });
  },

  methods: {
    // 菜单
    handleEdit(index, row) {
      console.log(index, row);
      this.open = false;
      this.$refs.myInp.focus();
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 新建楼栋
    news() {
      this.$refs.focus();
    },
    // 复制楼栋按钮的弹出

    bles() {
      this.ble = true;
    },

    eidt() {
      // this.open = false;
    },
    //  新建楼
    newsTower() {
      this.$refs.myInp.focus();
    },
    //菜单

    handleClick(tab, event) {
      console.log(tab, event);
    },

    //编辑页最上边删除按钮
      handleDelete() {
      const ids = this.$route.query.id;
      this.$modal
        .confirm('是否确认删除项目信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delProjectInfo(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});

       this.visible = false
    },
  },
};
</script>
<style lang="scss" scoped>
.bottom {
  margin-top: 20px;
}
// 菜单楼层

input {
  border: 1px solid white;
}
input:focus {
  outline: 1px solid white;
}
.right {
  width: 60%;
  margin-left: 40px;
}

.warp {
  display: flex;
}
// 侧面

.side {
  margin-top: 30px;
  width: 20%;
  float: left;
  margin-left: 10px;
  height: 900px;

  .header {
    display: flex;
  }
}

.boder {
  margin-top: 10px;

  height: 100px;
  border-top: 1px solid black;
}
.dao {
  position: absolute;
  left: 350px;
  top: 10px;
}
.line {
  width: 100%;
  position: absolute;
  top: 50px;
  right: 10px;
  border: 1px solid gray;
}
.message {
  margin-top: 10px;
  padding-left: 20px;
  width: 50%vh;
  height: 180px;
  margin-right: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  border: 1px solid gainsboro;
  border-radius: 1rem;

  span {
    font-size: 20px;
    margin-right: 120px;
  }
}
</style>
